<!--
//
// GVideoUpload.vue
// hs-admin
//
// Created by 区区电脑 on 2024/01/06.
//
-->
<template>
    <div class="GVideoUpload">
        <div v-if="modelValue" class="video-container">
            <video class="video" width="100%" height="100%" controls>
                <source :src="fullPath" type="video/mp4">
                您的浏览器不支持 video 标签。
            </video>
        </div>
        <div v-if="modelValue" class="actions">
            <el-button size="small" link type="primary" @click="chooseVideo">重新上传</el-button>
            <el-button size="small" link type="danger" @click="removeVideo">移除</el-button>
        </div>
        <div v-else class="placeholder" @click="chooseVideo">
            <b-icon name="bi-cloud-arrow-up" size="40" style="color: var(--el-color-primary)"/>
            <span style="color: var(--el-color-primary)">上传视频</span>
        </div>
        <div v-if="!!loadingMessage" class="progress-loading">
            <div v-loading="!!loadingMessage" class="loading"></div>
            <span>{{loadingMessage}}</span>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import * as api from "./api.js"

const props = defineProps({
    modelValue: {
        type: String,
        default: () => ""
    },
    params: {
        type: Object,
        default: () => {
        }
    },
    maxSize: {
        // M
        type: Number,
        default: () => 300
    }
});
const emits = defineEmits(["update:modelValue", "change"]);

const loadingMessage = ref()

const fullPath = computed(() => window.$config.baseUrl + "/" + props.modelValue)

function chooseVideo() {
    $chooseFile({
        count: 1,
        extension: [".mp4", ".avi"],
        maxSize: parseFloat((props.maxSize * 1024).toFixed(2)),
        success(files) {
            startUpload(files[0])
        }
    })
}

async function startUpload(file) {
    const formData = new FormData();
    formData.append("fileList", file);
    loadingMessage.value = "上传中"
    const {success, data} = await api.upload(props.params, formData, ({progress}) => {
        progress = (progress * 100).toFixed(2) + "%"
        loadingMessage.value = `上传中 ${progress}`
    });
    loadingMessage.value = null
    if (!success) {
        $message.warning("上传失败")
    }
    emits("update:modelValue", data)
    emits("change", data)
}

function removeVideo() {
    emits("update:modelValue")
    emits("change")
}


onMounted(() => {
    console.log("GVideoUpload onMounted");
})
</script>

<style scoped lang="scss">
.GVideoUpload {
    width: 100%;
    height: auto;
    position: relative;
    .placeholder {
        width: 100%;
        height: 200px;
        box-sizing: border-box;
        border-radius: 6px;
        border: 1px dashed var(--el-color-primary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &:active {
            opacity: 0.7;
        }
    }
    .video-container {
        width: 100%;
        height: auto;
        border-radius: 6px;
        box-sizing: border-box;
        background-color: #333;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        .video {
            width: 100%;
            height: auto;
        }
    }
    .progress-loading {
        position: absolute;
        z-index: 10;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        color: var(--el-color-primary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.9);
        .loading {
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 0, 0);
        }
    }
}
</style>
